<template>
  <div class="star">
    <header>
      <span></span>
      <strong>{{ $t("language.Star.name") }}</strong>
      <span @click="$openPage('/kefu')">
        <NuxtImg src="/img/kefu.png" alt="" />
      </span>
    </header>
    <dl>
      <dd v-for="(item, index) in starimg" @click="$openPage('StarDetail')" :key="index"
        :style="{ backgroundColor: !loading ? 'rgb(61, 64, 72)' : '' }">
        <NuxtImg :src="item.img" alt="" />
        <div class="text">{{ $t(item.lang) }}</div>
      </dd>
    </dl>
  </div>
</template>
<script setup lang="ts">

import { reactive, nextTick, onMounted, ref } from "vue";
let loading = ref<boolean>(true);
onMounted(() => {
  nextTick(() => {
    // loading.value = false;
    let time = setInterval(() => {
      loading.value = false;
      clearInterval(time);
    }, 500);
  });
});

let starimg = reactive<{ img: string, lang: string }[]>([
  {
    img: "/img/h1.jpg",
    lang: "language.Star.title1",
  },
  {
    img: "/img/h2.png",
    lang: "language.Star.title2",
  },
  {
    img: "/img/h3.jpg",
    lang: "language.Star.title3",
  },
  {
    img: "/img/h4.jpg",
    lang: "language.Star.title4",
  },
  {
    img: "/img/h5.jpg",
    lang: "language.Star.title5",
  },
  {
    img: "/img/h6.jpg",
    lang: "language.Star.title6",
  },
  {
    img: "/img/h7.jpg",
    lang: "language.Star.title7",
  },
  {
    img: "/img/h8.jpg",
    lang: "language.Star.title8",
  },
]);
</script>
<style scoped lang="scss">
.star {
  width: 100vw;
  min-height: 100vh;
  height: 100%;

  header {
    width: 100%;
    height: 45px;
    position: fixed;
    left: 0;
    top: 0;
    @include flex(row, space-between, center);
    background-color: rgb(36, 39, 43);
    padding: 0 20px;
    color: #fff;

    span {
      display: block;
      height: 28px;
      width: 28px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  dl {
    padding: 65px 20px 90px;
    width: 100vw;
    min-height: 100vh;
    height: 100%;

    dd {
      width: 100%;
      border-radius: 20px;
      @include flex(column, flex-start, center);
      cursor: pointer;
      height: 230px;
      img {
        width: 100%;
        height: 180px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
      }

      .text {
        height: 50px;
        line-height: 50px;
        width: 100%;
        text-align: left;
        color: #fff;
        font-size: 16px;
        padding: 0 10px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        background-color: rgb(61, 64, 72);
      }
    }

    dd+dd {
      margin-top: 20px;
    }
  }
}
</style>
